<div class="f-nav-detail">
	<detail-nav></detail-nav>
</div>
<div class="wrap">
	<div class="banner"><img src="{{bannerSrc}}" alt=""/><p ng-bind="title"></p></div>
	<div class="title"><span ng-bind="category.catalogName"></span></div>
	<div class="content">
		<div class="content-title">
			<div class="left"><img src="them/img/h2-span-two.png" alt=""/><span>工程资料库</span></div>
			<ul>
				<li ng-click="orderByTime()"><span>时间</span><img src="{{timeSrc}}" alt=""/></li>
				<li></li>
				<li ng-click="orderByDownload()"><span>人气</span><img src="{{downloadSrc}}" alt=""/></li>
			</ul>
		</div>
		<ul class="material-list">
			<li ng-repeat="item in dataList track by $index">
				<section class="top">
					<div class="left"><img src="{{item.imgSrc}}" alt=""/><span ng-bind="item.name" ui-sref="eng.techdetail({fileId:item.fileId})"></span></div>
					<div class="right"><span class="num" ng-bind="item.downloadCount">112</span><span class="time">{{item.uploadTime|dateFilter2}}</span></div>
				</section>
				<section class="bot">
					<ul class="left">
						<li>标签：</li>
						<li ng-repeat="tags in item.tagList">{{tags.name}}</li>
					</ul>
					<div class="right"><span ng-bind="item.price">85</span><span>积分</span></div>
				</section>
			</li>
		</ul>
		<div class="page-index">
			<ui-pagination ng-if="paginationConf" conf="paginationConf"></ui-pagination>
		</div>
	</div>
</div>
<div ng-include="'app/business/common/footer.html'"></div>
	<style>
		.page-index{
			height:71px;
		}
		.page-index>div{
			display: flex;
			justify-content: center;
		}
		.page-index>div .pagination{
			margin-left: 0;
		}
		*{
			box-sizing: border-box;
		}
		body{
			background: url("them/img/jb-bg.png") 0px 0px repeat;
			background-size: 600px 600px;
		}
		.wrap{
			width:1200px;
			margin:0 auto;
			margin-bottom:50px;
		}
		.banner{
			padding:10px 0;
			position: relative;
		}
		.banner p{
			color:white;
			font-size:30px;
			font-weight: bold;
			position: absolute;
			top:0;
			left:0;
			line-height:120px;
			padding-left:20px;
			text-shadow:5px 5px 15px rgba(0,0,0,.7);
		}
		.title{
			width:100%;
			height:60px;
			background:white;
			border-top:2px solid #ff6638;
			line-height:60px;
			margin:5px 0 10px 0;
		}
		.title span{
			color:#333333;
			font-size:20px;
			font-weight:bold;
			padding-left:20px;
		}
		.content{
			width:100%;
			background:white;
		}
		.content-title{
			height:62px;
			display: flex;
			justify-content: space-between;
			align-items:center;
			border-bottom:1px solid #dddddd;
			padding:0 20px;
		}
		.content-title .left{
			display: flex;
			align-items:center;
			justify-content: space-between;
		}
		.content-title .left span{
			color:#000000;
			font-size:18px;
			font-weight: bold;
			padding-left:12px;
		}
		.content-title ul{
			display: flex;
			justify-content: space-between;
			align-items:center;
		}
		.content-title ul li{
			cursor: pointer;
			padding-left:20px;
		}
		.content-title ul li:nth-child(2){
			border-right:1px solid #dddddd;
			height:16px;
		}
		.content-title ul li img{
			padding-left:5px;
			display: inline-block;
			width:15px;
			height:10px;
		}
		.material-list>li{
			padding:18px 20px;
			height:84px;
			width:100%;
			border-bottom:1px solid #dddddd;
		}
		.material-list>li section{
			display:flex;
			justify-content:space-between;
			height:50%;
		}
		.material-list>li .top{
			align-items:flex-start;
		}
		.material-list .top .left span{
			padding-left:12px;
			font-size:16px;
			font-weight: bold;
			color:#000000;
			cursor: pointer;
		}
		.material-list .top .left span:hover{
			color:#30a3ff;
		}
		.material-list .top .right span{
			color:#999;
		}
		.material-list .top .right .num{
			background:url("./them/imag/download.png") no-repeat left center;
			padding-left:20px;
		}
		.material-list .top .right .time{
			background:url("./them/imag/uploadTime.png") no-repeat left center;
			padding-left:20px;
			margin-left:30px;
		}
		.material-list>li .bot{
			align-items:flex-end;
		}
		.material-list>li:hover{
			background:#fafafa;
		}
		.material-list .bot .left,.material-list .top .left{
			display:flex;
			justify-content: space-between;
			align-items:center;
		}
		.material-list .bot{
			color:#999;
		}
		.material-list .bot li{
			margin-right:5px;
		}
		.material-list .bot .right span:nth-child(1){
			color:#666666;
			margin-right:5px;
		}
	</style>